{% extends 'base.html' %}

{% block head_extra %}
  <script type="text/javascript" src="{{ STATIC_URL }}js/question.js"></script>
{% endblock head_extra %}

{% block content %}


<!-- ABAIXO SAO INCLUDES REFERENTES A BARRA DE PROGRESSO -->
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- FIM DOS INCLUDES -->

 <!-- BARRA DE PROGRESSO -->
	<script>
		var progresso = parseInt("{{exam}}");
		$(function() {
			$( "#progressbar" ).progressbar({
				value: progresso
			});
			
			$("#progressbar").ready(function() {  
				//display the current value  
				$("<p>").attr("id", "percentage").text($("#progressbar").progressbar("option","value") + "%").appendTo(".progress-label");                   
			});
			
			$(".progress-label").css({ opacity: 0.4 })
			
		});
	</script>
	<div id="progressbar"></div>
	<div style='float: left; opacity: 0.4'>Progresso: </div> 
	<div class="progress-label"></div>
<!-- FIM DA BARRA DE PROGRESSO -->  	
  
  <p class="lead">{{ question.id }} - {{ question.question }}</p>
  <pre>{{ question.example }}</pre>
  <p>Escolha a resposta correta:</p>
  {% if answers %}
    <form id="frm-answers">
      {% csrf_token %}
      <input type="hidden" name="user-exam-id" value="{{ user_exam.id }}">      
      <input type="hidden" name="question-id" value="{{ question.id }}">
      {% for answer in answers %}
		<label class="radio"><input type="radio" name="rb-answer"  id="checar" value="{{ answer.id }}" {% if user_answer.closed_answer.id == answer.id %} checked {% endif %}> {{ answer.letter }}) {{ answer.answer }}</label>
      {% endfor %}
            
	<div class="form-actions">
		
      	<a href='javascript:history.back(-1)'><button type="button" class="btn"><i class="icon-chevron-left"></i> Anterior</button></a>
      	
      	{% if proxima_questao in verifica_proxima %}
			<a href="../{{proxima_questao}}"><button type="button" class="btn" >Proxima  <i class="icon-chevron-right"></i></button></a>
		{% else %}
			<a href='../../../../prova/{{exame.id}}/enviar/'><button type="button" class="btn btn-success">Finalizar  <i class="icon-ok"></i></button></a>
		{% endif %}
      </div>
    </form>
  {% endif %}
{% endblock content %}
